The Challenge
As part of an innovative campaign, Kipling brings its iconic monkeys back into the spotlight! For the 2024 holiday season, Glitchi, the digital studio of AppFoundry, received a special assignment: creating an interactive digital Christmas card where customers can have their personal message playfully delivered by Kipling monkeys.
The project came with three core requirements: the card had to work perfectly on all devices (with special attention to mobile devices), the personalized text had to integrate seamlessly into the video, and the entire experience had to run smoothly in the browser without server support.
An Innovative Technical Solution
Our digital studio Glitchi enthusiastically got to work and developed an advanced web solution in just two weeks. By cleverly combining video and real-time 3D technology, we created a unique interactive experience.
A look at the technology, for the enthusiasts:
- Video-first approach: By using video, we could offer high-quality animation that ran seamlessly on both high-end and low-end devices.
- Mapping on the 3D scene: Using Three.js, a simplified version of the 3D scene was loaded in the browser. This provided us with the necessary information to track:
- Animation data
- Bounding boxes and real-time positions and rotations of text cards
- Mesh data of monkeys and text cards as foreground objects
- Frame-perfect synchronization: The video and 3D animation timeline was synchronized in real-time, ensuring the text always moves perfectly in place.
- Depth masking: Foreground objects were rendered in the 'depth buffer'. This allowed dynamic text to correctly disappear behind objects, despite being in different layers.
The Result
As we are a company rooted in Belgium’s Antwerp, we are especially proud to have realized this collaboration with Kipling, which was also originally founded here.
Thanks to the dedication of our digital experts and the particularly pleasant collaboration with Kipling, we were able to produce a creative product with the following strengths:
- Accessibility: A web solution that works on every device, from desktop to mobile.
- Technical precision: Real-time animations that synchronize frame-perfectly with video.
- Cost savings: Kipling can easily reuse the solution for future campaigns with minimal adjustments.
- Scalability: Even under high traffic, the solution remains fast and affordable due to very low operational costs (all work happens in the browser).
A Happy Customer
"When we first conceived this idea, we had no idea if we could execute it. It was fantastic to see how the people from AppFoundry and Glitchi quickly found a solution with so much creativity and technical precision, and flexibly handled the timeline. They truly considered every detail to make this possible!"
- Nathalie Muylle, Kipling Marketing Manager EMEA
Looking Ahead
The success of this collaboration has paved the way for new joint projects between Kipling and AppFoundry / Glitchi. The first of these are already in the starting blocks.
Moreover, the developed technology offers interesting possibilities for more advanced applications. We can not only bring text to life but also animate entire 3D elements in real-time within a video, thereby mixing standard video and immersive 3D into one seamless experience.
Interested in creating similar digital experiences? Contact us at info@glitchi.be and discover how we can make your digital ambitions a reality.
